<template>
	<view :class="{active:active}" class="box1">
		外联样式1
	</view>
	<view :class="active ? '' : 'active'" class="box1">
		外联样式2
	</view>
	<view :style="{
		width:300 + 'px',
		height:300 + 'px',
		backgroundColor:'blue',
		fontSize:fontSize + 'px',
	}">
		内联样式1
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const active = ref(false)
	const fontSize = ref(1)
	let i = 1;
	const setint = setInterval(()=>{
		i++;
		active.value = !active.value
		fontSize.value = i * 5;
		i>10 ? clearInterval(setint): null;
	},1000)
</script>

<style lang="scss">
	.box1 {
		width: 300px;
		height: 300px;
		background-color: orange;
	}
	.active {
		background-color: red;
	}
</style>
